import React from 'react'
import {CircleToggleButton} from "../../../common/button/CircleToggleButton"
import classNames from 'classnames'


export class ScreenButton extends React.Component {
    classesWhenCompressed = 'fa fa-expand'
    classesWhenExpanded = 'fa fa-compress'

    tooltipWhenCompressed = 'Full Screen'
    tooltipWhenExpanded = 'Normal Screen'

    constructor (props){
        super(props)
        this.onExpand = this.onExpand.bind(this)
        this.onCompress = this.onCompress.bind(this)

        const initExpanded = this.props.fullScreen.state.expanded
        this.state = {
            expanded: initExpanded,
            screenClassName: initExpanded ? classNames(this.classesWhenExpanded):  classNames(this.classesWhenCompressed),
            tooltip : initExpanded ? this.tooltipWhenCompressed : this.tooltipWhenCompressed,
        }
    }

    onExpand (e){
        this.setState({
            screenClassName : classNames( this.classesWhenExpanded ),
            tooltip : this.tooltipWhenExpanded,
            expanded : true,
        })

        this.props.fullScreen.setState({
            expanded : true,
        })
    }


    onCompress (){
        this.setState({
            screenClassName : classNames( this.classesWhenCompressed ),
            tooltip : this.tooltipWhenCompressed,
            expanded : false,
        })
        this.props.fullScreen.setState({
            expanded : false,
        })
    }

    render () {
        const {fullScreenState, ...attributes} = this.props

        return (
            <CircleToggleButton id="btn-full-streen" buttonIcon={this.state.screenClassName} tooltip={this.state.tooltip} onClick={this.state.expanded ? this.onCompress : this.onExpand}/>
        )
    }
}
